// import...from... 语句引入, 从vue框架导入createApp函数
import { createApp } from 'vue'
import { doGet } from './http/httpRequest'

// 导入css样式, 不需要from子句
// import './style.css'

// 从element-plus框架导入ElementPlus组件
import ElementPlus from 'element-plus'

// 导入element-plus国际化的中文包
import zhCN from 'element-plus/dist/locale/zh-cn.mjs'

// 导入element-plus的css样式, 不需要from字句
import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 从router.js导入router组件
import router from './router/router'

// 从./App.vue页面导入App组件
import App from './App.vue' // 根组件

let app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 自定义指令
// el: 指令所绑定到的页面dom元素,可直接操作dom
// binding: 是一个对象, 包含多个属性, 重点看value属性: 传递给指令的值
app.directive('hasPermission', (el, binding) => {
  doGet('/api/login/info', {}).then(resp => {
    let user = resp.data.data
    let permissionList = user.permissionList
    let flag = false

    for(let key in permissionList) {
      if(permissionList[key] === binding.value) {
        flag = true
        break
      } 
    }
    if(!flag) {
      // 没有权限,把页面元素隐藏
      // 会出现按钮一闪而过
      // el.style.display = 'none'

      // 把没有权限的按钮dom元素删除
      el.parentNode && el.parentNode.removeChild(el)
    }
  })
})

// 利用上面所导入的createApp()函数, 创建一个vue应用, mount是挂载到#app地方
app.use(ElementPlus, {locale: zhCN}).use(router).mount('#app')
